import 'package:eh_mobile/common/utils/extension.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';

import '../../../common/values/svg_image.dart';
import 'index.dart';

class DeviceAreaPage extends GetView<DeviceAreaController> {
  const DeviceAreaPage({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView() {
    return Container(
      padding: const EdgeInsets.only(left: 20, right: 20),
      margin: const EdgeInsets.all(12).r,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          color: const Color.fromRGBO(255, 255, 255, 0.1)),
      child: SingleChildScrollView(
        child: Column(
          children: _buildAreaListWidget(),
        ),
      ),
    );
  }

  List<Widget> _buildAreaListWidget() {
    var widgets = <Widget>[];
    for (var i = 0; i < controller.roomList.length; i++) {
      widgets.add(_buildListItem(i));
      if (i < controller.roomList.length - 1) {
        widgets.add(Container(
          height: 1,
          color: const Color.fromRGBO(255, 255, 255, 0.05),
        ));
      }
    }
    return widgets;
  }

  Widget _buildListItem(int index) {
    String roomName = controller.roomList[index];
    return Container(
      color: Colors.transparent,
      height: 60.r,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            controller.roomList[index],
            style: 18.ts,
          ),
          SizedBox(
            width: 22.r,
            height: 22.r,
            child: SvgPicture.asset(
              SVGImage.listIcSelectOkSvg,
            ),
          ).hidden(controller.areaName != roomName)
        ],
      ),
    ).onClick(() {
      controller.currentIndex = index;
      controller.areaName = roomName;
      controller.update(["device_area"]);
      controller.submitClick();
      ;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<DeviceAreaController>(
      init: DeviceAreaController(),
      id: "device_area",
      builder: (_) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("设备区域"),
            automaticallyImplyLeading: false, //隐藏返回按钮
            leadingWidth: 70.r,
            leading: UnconstrainedBox(
              child: Container(
                width: 42.r,
                height: 32.r,
                padding: const EdgeInsets.fromLTRB(0, 4, 0, 4).r,
                decoration: BoxDecoration(
                  color: const Color.fromRGBO(222, 222, 222, 0.1),
                  borderRadius: BorderRadius.circular(16.r),
                ),
                child: SvgPicture.asset(
                  SVGImage.icReturnSvg,
                  // fit: BoxFit.contain,
                  color: Colors.white,
                ),
              ).onClick(() {
                Get.back();
              }),
            ),
          ),
          body: SafeArea(
            child: _buildView(),
          ),
        );
      },
    );
  }
}
